<template>
  <div class="music-page">
    <!-- 背景特效容器 -->
    <div class="background-effects"></div>
    
    <!-- 页面头部 -->
    <Header />
    
    <!-- 音乐页面内容 -->
    <main class="main-content">
      <div class="music-container" 
           :class="{ 'fullscreen': isFullscreen }"
           @touchstart="handleTouchStart"
           @touchmove="handleTouchMove"
           @touchend="handleTouchEnd"
           @mousedown="handleMouseDown"
           @mousemove="handleMouseMove"
           @mouseup="handleMouseUp">
        <div class="content-wrapper">
          
          <!-- 引导手势动画 -->
          <div v-if="showSwipeGuide" class="swipe-guide" @click="hideSwipeGuide">
            <div class="swipe-animation">
              <div class="swipe-hand"></div>
              <div class="swipe-text">左右滑动切换歌曲</div>
            </div>
          </div>
          
          <!-- 音乐卡片列表 -->
          <div class="music-grid">
            <div 
              v-for="music in musicList" 
              :key="music.id" 
              class="music-card"
              :class="{ 'active': music.id === currentMusic.id }"
              @click="togglePlay(music)"
            >
              <div class="card-cover">
                <img :src="music.cover" :alt="music.title" />
                <div class="play-overlay">
                  <span class="play-icon">{{ music.id === currentMusic.id && isPlaying ? '⏸' : '▶' }}</span>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">{{ music.title }}</h3>
                <p class="card-artist">{{ music.artist }}</p>
                <div class="card-stats">
                  <span class="stat-item">
                    <span class="stat-icon">👁</span>
                    {{ formatNumber(music.views) }}
                  </span>
                  <span class="stat-item">
                    <span class="stat-icon">❤</span>
                    {{ formatNumber(music.favorites) }}
                  </span>
                  <span 
                    class="stat-item like-stat" 
                    :class="{ 'liked': isMusicLiked(music.id) }"
                    @click.stop="toggleLike(music.id, $event)"
                  >
                    <span class="stat-icon">👍</span>
                    {{ formatNumber(music.likes) }}
                    <span v-if="showLikeEffect === music.id" class="like-effect">+1</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 导航按钮 -->
          <div class="navigation">
            <button @click="goToGallery" class="nav-btn">查看图片画廊</button>
          </div>
        </div>
        
        <!-- 全屏播放器 -->
        <div v-if="isFullscreen" class="fullscreen-player">
          <div class="fullscreen-content">
            <button @click="toggleFullscreen" class="close-btn">×</button>
            <div class="fullscreen-album">
              <img :src="currentMusic.cover" :alt="currentMusic.title" />
            </div>
            <div class="fullscreen-info">
              <h2 class="fullscreen-title">{{ currentMusic.title }}</h2>
              <p class="fullscreen-artist">{{ currentMusic.artist }}</p>
            </div>
            <div class="fullscreen-controls">
              <button @click="playPrevious" class="control-btn">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 6H8V18H6V6ZM9.5 12L18 6V18L9.5 12Z" fill="currentColor"/>
                </svg>
              </button>
              
              <button @click="togglePlay()" class="play-btn large" :class="{ 'playing': isPlaying }">
                <svg v-if="!isPlaying" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
                </svg>
                <svg v-else width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 5H10V19H6V5ZM14 5H18V19H14V5Z" fill="currentColor"/>
                </svg>
              </button>
              
              <button @click="playNext" class="control-btn">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18V6L14.5 12L6 18ZM16 6H18V18H16V6Z" fill="currentColor"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 歌词显示区域 -->
        <div 
          v-if="showLyrics" 
          class="lyrics-overlay" 
          @click="toggleLyrics"
        >
          <div 
            class="lyrics-content" 
            @click.stop
            :style="{
              top: lyricsPosition.y + 'px',
              left: lyricsPosition.x + 'px',
              width: '60%',
              maxWidth: '800px',
              maxHeight: '150px'
            }"
            @mousedown="startDrag"
          >
            <div class="lyrics-header">
              <h3>歌词</h3>
              <button class="close-lyrics" @click="toggleLyrics">×</button>
            </div>
            <div class="lyrics-body">
              <p class="lyrics-line">暂无歌词信息</p>
              <p class="lyrics-line">这里是歌词显示区域</p>
              <p class="lyrics-line">可以显示歌曲的歌词内容</p>
              <p class="lyrics-line">歌词内容会随着音乐播放而滚动</p>
              <p class="lyrics-line">您可以拖动此窗口到任意位置</p>
            </div>
          </div>
        </div>
        
        <!-- 底部固定播放条 -->
        <div class="bottom-player" :style="playerColorStyle">
          <div class="bottom-player-content">
            <div class="bottom-player-left">
              <img :src="currentMusic.cover" :alt="currentMusic.title" class="bottom-player-cover" @click="toggleFullCoverMode" />
              <div class="bottom-player-text">
                <div class="bottom-player-title">{{ currentMusic.title }} <span v-if="currentMusic.vip" class="vip-badge">VIP</span></div>
                <div class="bottom-player-artist">{{ currentMusic.artist }}</div>
              </div>
              <div class="player-actions">
                <button 
                  class="action-btn like-btn" 
                  :class="{ 'liked': isMusicLiked(currentMusic.id) }"
                  @click="toggleLike(currentMusic.id, $event)" 
                  title="点赞"
                >
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor" fill-opacity="0.7"/>
                  </svg>
                  <span v-if="showLikeEffect === currentMusic.id" class="like-effect">+1</span>
                </button>
                <button class="action-btn more-btn" title="更多选项" @click.stop="toggleMoreMenu">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="white" fill-opacity="0.7"/>
                  </svg>
                </button>
                
                <!-- 更多选项菜单 -->
                <div v-if="showMoreMenu" class="more-menu" @click.stop>
                  <ul class="menu-list">
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
                      </svg>
                      <span>添加到歌单</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2V7zm0 8h2v2h-2v-2z" fill="currentColor"/>
                      </svg>
                      <span>少推荐</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
                      </svg>
                      <span>查看歌手</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
                      </svg>
                      <span>查看专辑</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" fill="currentColor"/>
                      </svg>
                      <span>分享</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z" fill="currentColor"/>
                      </svg>
                      <span>歌曲信息反馈</span>
                    </li>
                    <li class="menu-item" @click="hideMoreMenu">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
                      </svg>
                      <span>举报歌曲</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div class="bottom-player-center">
              <div class="bottom-player-controls">
                <button @click="playPrevious" class="control-btn">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 6H8V18H6V6ZM9.5 12L18 6V18L9.5 12Z" fill="white"/>
                  </svg>
                </button>
                
                <button @click="togglePlay()" class="play-btn" :class="{ 'playing': isPlaying }">
                  <svg v-if="!isPlaying" width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 5V19L19 12L8 5Z" fill="white"/>
                  </svg>
                  <svg v-else width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 5H10V19H6V5ZM14 5H18V19H14V5Z" fill="white"/>
                  </svg>
                </button>
                
                <button @click="playNext" class="control-btn">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 18V6L14.5 12L6 18ZM16 6H18V18H16V6Z" fill="white"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="bottom-player-right">
              <button class="control-btn sound-btn" title="音质">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z" fill="white" fill-opacity="0.7"/>
                </svg>
                <span>音质</span>
              </button>
              
              <button class="control-btn lyrics-btn" title="歌词" @click="toggleLyrics">
                <span>词</span>
              </button>
              <button class="control-btn repeat-btn" title="循环播放" @click="toggleLoop">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" fill="white" fill-opacity="0.7"/>
                </svg>
              </button>
              
              <button class="control-btn volume-btn" @click="toggleMute" title="音量">
                <svg v-if="volume === 0 || isMuted" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" fill="white" fill-opacity="0.7"/>
                </svg>
                <svg v-else-if="volume < 0.5" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" fill="white" fill-opacity="0.7"/>
                </svg>
                <svg v-else width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" fill="white" fill-opacity="0.7"/>
                </svg>
              </button>
              
              <button class="control-btn playlist-btn" title="播放列表">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 10h12v2H4v-2zm0-4h12v2H4V6zm0 8h8v2H4v-2zm10 0h8v2h-8v-2zm-10 4h8v2H4v-2zm10 0h8v2h-8v-2z" fill="white" fill-opacity="0.7"/>
                </svg>
              </button>
              
              <button class="control-btn fullscreen-btn" title="全屏模式" @click="toggleFullCoverMode">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" fill="white" fill-opacity="0.7"/>
                </svg>
              </button>
            </div>
          </div>
          
          <!-- 全屏封面模式 -->
        <div v-if="isFullCoverMode" class="fullcover-mode">
          <button @click="backToMusicList" class="back-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="currentColor"/>
            </svg>
          </button>
          <button @click="toggleFullCoverMode" class="power-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3c-4.962 0-9 4.038-9 9 0 4.963 4.038 9 9 9 4.963 0 9-4.037 9-9 0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.14-7-7 0-3.86 3.141-7 7-7 3.86 0 7 3.14 7 7 0 3.86-3.14 7-7 7z" fill="white"/>
              <path d="M12 7v6" stroke="white" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
          <div class="fullcover-content">
            <div class="fullcover-main">
              <div class="fullcover-left">
                <img :src="currentMusic.cover" :alt="currentMusic.title" class="fullcover-image" />
                <div class="fullcover-info">
                  <h2 class="fullcover-title">{{ currentMusic.title }}</h2>
                  <p class="fullcover-artist">{{ currentMusic.artist }}</p>
                </div>
              </div>
            </div>
              
            <!-- 底部歌词区域 -->
            <div class="fullcover-lyrics-container">
              <div class="fullcover-lyrics-content">
                <p class="lyrics-line">让我们沉浸在音乐的海洋里</p>
                <p class="lyrics-line">每一首歌都有其独特的故事</p>
                <p class="lyrics-line">通过旋律和节奏传递内心的感受</p>
                <p class="lyrics-line">音乐是一种能够表达情感的艺术</p>
                <p class="lyrics-line active">歌词内容会随着音乐播放而滚动</p>
                <p class="lyrics-line">可以显示歌曲的歌词内容</p>
                <p class="lyrics-line">这里是歌词显示区域</p>
                <p class="lyrics-line">暂无歌词信息</p>
              </div>
            </div>
            <div class="fullcover-controls">
              <button @click="playPrevious" class="fullcover-control-btn">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 6H8V18H6V6ZM9.5 12L18 6V18L9.5 12Z" fill="white"/>
                </svg>
              </button>
              
              <button @click="togglePlay()" class="fullcover-play-btn" :class="{ 'playing': isPlaying }">
                <svg v-if="!isPlaying" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 5V19L19 12L8 5Z" fill="white"/>
                </svg>
                <svg v-else width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 5H10V19H6V5ZM14 5H18V19H14V5Z" fill="white"/>
                </svg>
              </button>
              
              <button @click="playNext" class="fullcover-control-btn">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18V6L14.5 12L6 18ZM16 6H18V18H16V6Z" fill="white"/>
                </svg>
              </button>
            </div>
            
            <div class="fullcover-progress">
              <span class="time-display">{{ formatTime(currentTime) }}</span>
              <div class="progress-bar" @click="onProgressClick">
                <div class="progress-fill" :style="{ width: duration ? (currentTime / duration * 100) + '%' : '0%' }">
                  <div class="progress-handle"></div>
                </div>
              </div>
              <span class="time-display">{{ formatTime(duration) }}</span>
            </div>
          </div>
        </div>
        
        <!-- 进度条 -->
          <div class="player-progress">
            <div class="progress-bar" @click="onProgressClick">
              <div class="progress-fill" :style="{ width: duration ? (currentTime / duration * 100) + '%' : '0%' }"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <!-- 回到顶部组件 -->
    <BackToTop />
    <FloatContact />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
// @ts-ignore
import { Howl } from 'howler'
// @ts-ignore
import { Howler } from 'howler'
import { useRouter } from 'vue-router'
import Header from '../components/Header.vue'
import BackToTop from '../components/BackToTop.vue'
import FloatContact from '../components/FloatContact.vue'

const router = useRouter()

// 音频相关
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(0.7) // 默认音量70%
const isMuted = ref(false) // 是否静音
let sound: Howl | null = null
let updateInterval: number | null = null

// 底部播放条颜色相关
const playerColorSchemes = [
  { main: '#9c0000', secondary: '#ff5252' },   // 深红色
  { main: '#6a1b9a', secondary: '#9c27b0' },   // 紫色
  { main: '#1565c0', secondary: '#2196f3' },   // 蓝色
  { main: '#00695c', secondary: '#009688' },   // 青绿色
  { main: '#d84315', secondary: '#ff5722' }    // 橙色
]
const currentColorSchemeIndex = ref(0)
const playerColorStyle = ref<{[key: string]: string}>({})
let colorChangeTimer: number | null = null;  // 添加定时器引用变量

// 滚动相关
const isScrolled = ref(false)
const showBottomPlayer = ref(true)

// 播放设置相关
const isLooping = ref(false) // 循环播放
const playMode = ref('sequence') // 播放模式: sequence(顺序), single(单曲), shuffle(随机)

// 全屏播放相关
const isFullscreen = ref(false)

// 全屏封面显示相关
const isFullCoverMode = ref(false)

// 点赞相关
const likedSongs = ref<number[]>([]) // 存储已点赞歌曲的id
const showLikeEffect = ref<number | null>(null) // 控制哪首歌显示点赞特效

// 更多选项菜单相关
const showMoreMenu = ref(false) // 控制更多选项菜单显示

// 歌词显示相关
const showLyrics = ref(false) // 控制歌词显示
const lyricsPosition = ref({ x: 0, y: 0 }) // 歌词块位置
const isDragging = ref(false) // 是否正在拖动
const dragStart = ref({ x: 0, y: 0 }) // 拖动起始位置
const currentLyricIndex = ref(4) // 当前歌词索引
let lyricsUpdateInterval: number | null = null // 歌词更新定时器

// 左右滑动相关
const swipeStartX = ref(0)
const swipeStartY = ref(0)
const isSwiping = ref(false)
const currentSwipeIndex = ref(0)
const showSwipeGuide = ref(true) // 控制引导手势显示

// 点赞函数
const toggleLike = (musicId: number, event?: MouseEvent) => {
  // 检查歌曲是否已被点赞
  const index = likedSongs.value.indexOf(musicId)
  if (index === -1) {
    // 添加到点赞列表
    likedSongs.value.push(musicId)
    
    // 触发点赞动画效果
    showLikeEffect.value = musicId
    
    // 增加点赞数
    const music = musicList.value.find(m => m.id === musicId)
    if (music) {
      music.likes += 1
    }
    
    // 如果有事件对象，创建水花效果
    if (event) {
      createRippleEffect(event)
    }
    
    // 2秒后移除特效
    setTimeout(() => {
      if (showLikeEffect.value === musicId) {
        showLikeEffect.value = null
      }
    }, 2000)
  } else {
    // 从点赞列表中移除
    likedSongs.value.splice(index, 1)
    
    // 减少点赞数
    const music = musicList.value.find(m => m.id === musicId)
    if (music) {
      music.likes = Math.max(0, music.likes - 1)
    }
  }
}

// 创建水花效果
const createRippleEffect = (event: MouseEvent) => {
  const button = event.currentTarget as HTMLElement
  const rect = button.getBoundingClientRect()
  
  // 计算点击位置相对于按钮的坐标
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top
  
  // 创建水花元素
  const ripple = document.createElement('span')
  ripple.className = 'ripple-effect'
  ripple.style.left = x + 'px'
  ripple.style.top = y + 'px'
  
  // 添加到按钮中
  button.appendChild(ripple)
  
  // 动画结束后移除水花元素
  setTimeout(() => {
    ripple.remove()
  }, 1000)
}

// 检查歌曲是否被点赞
const isMusicLiked = (musicId: number): boolean => {
  return likedSongs.value.includes(musicId)
}

// 跳转到画廊页面
const goToGallery = () => {
  router.push('/main/gallery')
}

// 切换更多选项菜单显示
const toggleMoreMenu = () => {
  showMoreMenu.value = !showMoreMenu.value
}

// 隐藏更多选项菜单
const hideMoreMenu = () => {
  showMoreMenu.value = false
}

// 切换歌词显示
const toggleLyrics = () => {
  showLyrics.value = !showLyrics.value
  // 设置默认位置为紧挨着底部播放条
  if (showLyrics.value) {
    lyricsPosition.value = {
      x: window.innerWidth * 0.2, // 居中显示 (100% - 60%) / 2
      y: window.innerHeight - 150 // 紧挨着底部播放条上方
    }
  }
}

// 音乐列表（扩展数据结构）
const musicList = ref([
  { 
    id: 1, 
    title: '三毛流浪记主题曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/yi-sheng-suo-ai.mp3',
    cover: '/static/images/image1.jpg',
    views: 12800,
    favorites: 3200,
    likes: 4500,
    vip: true
  },
  { 
    id: 2, 
    title: '三毛流浪记插曲1', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music2.mp3',
    cover: '/static/images/image2.jpg',
    views: 9800,
    favorites: 2100,
    likes: 3200,
    vip: false
  },
  { 
    id: 3, 
    title: '三毛流浪记插曲2', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music3.mp3',
    cover: '/static/images/image3.jpg',
    views: 8700,
    favorites: 1900,
    likes: 2800,
    vip: false
  },
  { 
    id: 4, 
    title: '三毛流浪记片尾曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music4.mp3',
    cover: '/static/images/image4.jpg',
    views: 11500,
    favorites: 2900,
    likes: 4100,
    vip: true
  },
  { 
    id: 5, 
    title: '三毛流浪记背景音乐', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music5.mp3',
    cover: '/static/images/image5.jpg',
    views: 7600,
    favorites: 1500,
    likes: 2300,
    vip: false
  },
  { 
    id: 6, 
    title: '三毛流浪记回忆曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music6.mp3',
    cover: '/static/images/image6.jpg',
    views: 9200,
    favorites: 1800,
    likes: 2700,
    vip: false
  },
  { 
    id: 7, 
    title: '三毛流浪记温馨曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music7.mp3',
    cover: '/static/images/image7.jpg',
    views: 6800,
    favorites: 1300,
    likes: 1900,
    vip: false
  },
  { 
    id: 8, 
    title: '三毛流浪记冒险曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music8.mp3',
    cover: '/static/images/image8.jpg',
    views: 8400,
    favorites: 1700,
    likes: 2500,
    vip: false
  },
  { 
    id: 9, 
    title: '三毛流浪记友情曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music9.mp3',
    cover: '/static/images/image9.jpg',
    views: 7900,
    favorites: 1600,
    likes: 2200,
    vip: true
  },
  { 
    id: 10, 
    title: '三毛流浪记成长曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music10.mp3',
    cover: '/static/images/image10.jpg',
    views: 9100,
    favorites: 1850,
    likes: 2600,
    vip: false
  },
  { 
    id: 11, 
    title: '三毛流浪记梦想曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music11.mp3',
    cover: '/static/images/image11.jpg',
    views: 8300,
    favorites: 1650,
    likes: 2400,
    vip: false
  },
  { 
    id: 12, 
    title: '三毛流浪记希望曲', 
    artist: '经典动画配乐', 
    url: '/static/mp3/music12.mp3',
    cover: '/static/images/image12.jpg',
    views: 8900,
    favorites: 1750,
    likes: 2550,
    vip: true
  }
])

const currentMusic = ref(musicList.value[0])

// 计算当前音乐索引
const currentIndex = computed(() => {
  return musicList.value.findIndex(music => music.id === currentMusic.value.id)
})

// 处理滚动事件
const handleScroll = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop
  isScrolled.value = scrollTop > 50
  showBottomPlayer.value = scrollTop > 100
}

// 音频控制函数
const togglePlay = (music?: any) => {
  // 如果传入了音乐，则切换到该音乐
  if (music && music.id !== currentMusic.value.id) {
    if (sound) {
      sound.stop()
      sound.unload()
      sound = null
    }
    currentMusic.value = music
    isPlaying.value = false
    currentTime.value = 0
    duration.value = 0
  }
  
  if (!sound) {
    // 初始化音频对象
    sound = new Howl({
      src: [currentMusic.value.url],
      html5: true,
      volume: isMuted.value ? 0 : volume.value,
      onplay: () => {
        isPlaying.value = true
        duration.value = sound ? sound.duration() : 0
        startProgressUpdate()
      },
      onpause: () => {
        isPlaying.value = false
        stopProgressUpdate()
      },
      onstop: () => {
        isPlaying.value = false
        stopProgressUpdate()
      },
      onend: () => {
        isPlaying.value = false
        stopProgressUpdate()
        currentTime.value = 0
        
        // 根据播放模式处理下一首
        if (isLooping.value) {
          // 单曲循环
          playCurrentMusic()
        } else if (playMode.value === 'sequence') {
          // 顺序播放
          playNext()
        } else if (playMode.value === 'shuffle') {
          // 随机播放
          playRandom()
        }
      }
    })
  }
  
  if (sound.playing()) {
    sound.pause()
  } else {
    sound.play()
  }
}

// 播放当前音乐
const playCurrentMusic = () => {
  if (sound) {
    sound.stop()
    sound.unload()
    sound = null
  }
  togglePlay()
}

// 播放上一首
const playPrevious = () => {
  let index = currentIndex.value
  if (index > 0) {
    index--
  } else {
    // 如果是第一首，则跳到最后一首
    index = musicList.value.length - 1
  }
  togglePlay(musicList.value[index])
}

// 播放下一首
const playNext = () => {
  let index = currentIndex.value
  if (index < musicList.value.length - 1) {
    index++
  } else {
    // 如果是最后一首，则跳到第一首
    index = 0
  }
  togglePlay(musicList.value[index])
}

// 随机播放
const playRandom = () => {
  const randomIndex = Math.floor(Math.random() * musicList.value.length)
  togglePlay(musicList.value[randomIndex])
}

// 设置音量
// @ts-ignore
const setVolume = (value: number) => {
  volume.value = value
  if (sound && !isMuted.value) {
    // @ts-ignore
    sound.volume(value)
  }
}

// 切换静音
const toggleMute = () => {
  isMuted.value = !isMuted.value
  if (sound) {
    // @ts-ignore
    sound.volume(isMuted.value ? 0 : volume.value)
  }
}

// 切换循环模式
const toggleLoop = () => {
  isLooping.value = !isLooping.value
}

// 切换播放模式
// @ts-ignore
const togglePlayMode = () => {
  const modes = ['sequence', 'single', 'shuffle']
  const currentIndex = modes.indexOf(playMode.value)
  const nextIndex = (currentIndex + 1) % modes.length
  playMode.value = modes[nextIndex] as 'sequence' | 'single' | 'shuffle'
}

// 切换全屏
const toggleFullscreen = () => {
  const elem = document.documentElement;
  // 使用 TypeScript 类型断言解决浏览器兼容性的类型错误
  const doc = document as any;
  
  if (!doc.fullscreenElement && !doc.mozFullScreenElement &&
      !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    // 请求全屏
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else {
      // 使用类型断言处理浏览器前缀属性
      const elemAny = elem as any;
      if (elemAny.mozRequestFullScreen) { // Firefox
        elemAny.mozRequestFullScreen();
      } else if (elemAny.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elemAny.webkitRequestFullscreen();
      } else if (elemAny.msRequestFullscreen) { // IE/Edge
        elemAny.msRequestFullscreen();
      }
    }
  } else {
    // 退出全屏
    if (doc.exitFullscreen) {
      doc.exitFullscreen();
    } else if (doc.mozCancelFullScreen) { // Firefox
      doc.mozCancelFullScreen();
    } else if (doc.webkitExitFullscreen) { // Chrome, Safari and Opera
      doc.webkitExitFullscreen();
    } else if (doc.msExitFullscreen) { // IE/Edge
      doc.msExitFullscreen();
    }
  }
}

// 切换全屏封面模式
const toggleFullCoverMode = () => {
  isFullCoverMode.value = !isFullCoverMode.value
  // 当进入全屏封面模式时添加缓冲效果
  if (isFullCoverMode.value) {
    document.body.style.overflow = 'hidden' // 禁止滚动
    startLyricsUpdate() // 开始模拟歌词滚动
  } else {
    document.body.style.overflow = '' // 恢复滚动
    stopLyricsUpdate() // 停止歌词滚动
  }
}

// 返回音乐列表
const backToMusicList = () => {
  isFullCoverMode.value = false
  document.body.style.overflow = '' // 恢复滚动
  stopLyricsUpdate() // 停止歌词滚动
}

// 开始歌词更新
const startLyricsUpdate = () => {
  // 清除现有定时器
  stopLyricsUpdate()
  
  // 设置定时器每3秒更新一次歌词位置
  lyricsUpdateInterval = window.setInterval(() => {
    // 找到所有歌词元素
    const lyricsLines = document.querySelectorAll('.fullcover-lyrics .lyrics-line')
    if (lyricsLines.length === 0) return
    
    // 移除所有歌词的active类
    lyricsLines.forEach(line => line.classList.remove('active'))
    
    // 更新当前歌词索引
    currentLyricIndex.value = (currentLyricIndex.value - 1 + lyricsLines.length) % lyricsLines.length
    
    // 为当前歌词添加active类
    lyricsLines[currentLyricIndex.value].classList.add('active')
  }, 3000)
}

// 停止歌词更新
const stopLyricsUpdate = () => {
  if (lyricsUpdateInterval) {
    clearInterval(lyricsUpdateInterval)
    lyricsUpdateInterval = null
  }
}

// 跳转到指定时间
const seek = (percent: number) => {
  if (sound && duration.value > 0) {
    const newTime = duration.value * percent
    // @ts-ignore
    sound.seek(newTime)
    currentTime.value = newTime
  }
}

// @ts-ignore
const selectMusic = (music: any) => {
  if (sound) {
    sound.stop()
    sound.unload()
    sound = null
  }
  currentMusic.value = music
  isPlaying.value = false
  currentTime.value = 0
  duration.value = 0
}

// 格式化数字显示
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

// 格式化时间显示
const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs < 10 ? '0' : ''}${secs}`
}

// 开始进度更新
const startProgressUpdate = () => {
  stopProgressUpdate()
  updateInterval = window.setInterval(() => {
    if (sound) {
      currentTime.value = sound.seek()
    }
  }, 1000)
}

// 停止进度更新
const stopProgressUpdate = () => {
  if (updateInterval) {
    clearInterval(updateInterval)
    updateInterval = null
  }
}

// 处理进度条点击
const onProgressClick = (e: MouseEvent) => {
  if (!sound) return
  
  const progressBar = e.currentTarget as HTMLElement
  const rect = progressBar.getBoundingClientRect()
  const percent = (e.clientX - rect.left) / rect.width
  
  const newTime = percent * duration.value
  // @ts-ignore
  sound.seek(newTime)
  currentTime.value = newTime
}

// 开始拖动
const startDrag = (e: MouseEvent) => {
  isDragging.value = true
  dragStart.value = {
    x: e.clientX - lyricsPosition.value.x,
    y: e.clientY - lyricsPosition.value.y
  }
  
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

// 拖动中
const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return
  
  lyricsPosition.value = {
    x: e.clientX - dragStart.value.x,
    y: e.clientY - dragStart.value.y
  }
}

// 停止拖动
const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 处理触摸开始事件（移动端滑动）
const handleTouchStart = (e: TouchEvent) => {
  swipeStartX.value = e.touches[0].clientX
  swipeStartY.value = e.touches[0].clientY
  isSwiping.value = true
}

// 处理触摸移动事件
const handleTouchMove = (e: TouchEvent) => {
  if (!isSwiping.value) return
  
  const touchX = e.touches[0].clientX
  const touchY = e.touches[0].clientY
  const deltaX = touchX - swipeStartX.value
  const deltaY = touchY - swipeStartY.value
  
  // 判断是否为水平滑动
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    e.preventDefault() // 阻止页面滚动
  }
}

// 处理触摸结束事件
const handleTouchEnd = (e: TouchEvent) => {
  if (!isSwiping.value) return
  
  const touchX = e.changedTouches[0].clientX
  const deltaX = touchX - swipeStartX.value
  
  // 判断滑动方向和距离
  if (Math.abs(deltaX) > 50) { // 最小滑动距离
    if (deltaX > 0) {
      // 向右滑动，上一首
      playPrevious()
    } else {
      // 向左滑动，下一首
      playNext()
    }
  }
  
  isSwiping.value = false
  showSwipeGuide.value = false // 隐藏引导手势
}

// 处理鼠标按下事件（桌面端滑动）
const handleMouseDown = (e: MouseEvent) => {
  swipeStartX.value = e.clientX
  swipeStartY.value = e.clientY
  isSwiping.value = true
}

// 处理鼠标移动事件
const handleMouseMove = (e: MouseEvent) => {
  if (!isSwiping.value) return
  
  const deltaX = e.clientX - swipeStartX.value
  const deltaY = e.clientY - swipeStartY.value
  
  // 判断是否为水平滑动
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    e.preventDefault() // 阻止页面滚动
  }
}

// 处理鼠标抬起事件
const handleMouseUp = (e: MouseEvent) => {
  if (!isSwiping.value) return
  
  const deltaX = e.clientX - swipeStartX.value
  
  // 判断滑动方向和距离
  if (Math.abs(deltaX) > 50) { // 最小滑动距离
    if (deltaX > 0) {
      // 向右滑动，上一首
      playPrevious()
    } else {
      // 向左滑动，下一首
      playNext()
    }
  }
  
  isSwiping.value = false
  showSwipeGuide.value = false // 隐藏引导手势
}

// 隐藏引导手势
const hideSwipeGuide = () => {
  showSwipeGuide.value = false
}

// 更新播放器颜色方案
const updatePlayerColorScheme = () => {
  // 获取下一个颜色方案索引
  const nextIndex = (currentColorSchemeIndex.value + 1) % playerColorSchemes.length
  
  // 设置新的颜色方案
  currentColorSchemeIndex.value = nextIndex
  
  // 更新颜色样式对象
  playerColorStyle.value = {
    '--player-main-color': playerColorSchemes[nextIndex].main,
    '--player-secondary-color': playerColorSchemes[nextIndex].secondary,
  }
}

// 初始化颜色方案
const initPlayerColorScheme = () => {
  // 设置初始颜色方案
  playerColorStyle.value = {
    '--player-main-color': playerColorSchemes[0].main,
    '--player-secondary-color': playerColorSchemes[0].secondary,
  }
  
  // 设置定时器，每60秒更新一次颜色
  setInterval(updatePlayerColorScheme, 60000) // 60000ms = 1分钟
}

// 生命周期钩子
onMounted(() => {
  // @ts-ignore
  window.addEventListener('scroll', handleScroll)
  
  // 添加点击事件监听器，用于隐藏菜单
  document.addEventListener('click', hideMoreMenu)
  
  // 添加鼠标移动和鼠标释放事件监听器，用于拖动歌词块
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  
  // 初始化播放器颜色方案
  initPlayerColorScheme()
  
  // 5秒后自动隐藏引导手势
  setTimeout(() => {
    showSwipeGuide.value = false
  }, 5000)
  
  // 初始化播放器颜色切换定时器
  colorChangeTimer = window.setInterval(updatePlayerColorScheme, 60000) // 60000ms = 1分钟
})

onBeforeUnmount(() => {
  stopProgressUpdate()
  stopLyricsUpdate() // 清除歌词更新定时器
  
  if (sound) {
    sound.unload()
  }
  
  // 移除滚动事件监听器
  window.removeEventListener('scroll', handleScroll)
  
  // 移除点击事件监听器
  document.removeEventListener('click', hideMoreMenu)
  
  // 移除鼠标移动和鼠标释放事件监听器
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  
  // 清除颜色变化定时器
  if (colorChangeTimer !== null) {
    clearInterval(colorChangeTimer)
    colorChangeTimer = null
  }
})
</script>

<style scoped>
.music-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.background-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.background-effects::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 108, 255, 0.05) 0%, transparent 70%);
  animation: rotate 15s linear infinite;
}

.background-effects::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 40%, rgba(100, 108, 255, 0.03) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

.main-content {
  flex: 1;
  position: relative;
  z-index: 1;
  padding-top: 60px; /* 为固定头部留出空间 */
}

.music-container {
  min-height: calc(100vh - 60px);
  background: #f8f8f8; /* 与整体项目保持一致的乳白色背景 */
  padding: 20px;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 80px; /* 为底部播放器留出空间 */
}

.music-container.fullscreen {
  min-height: 100vh;
  padding: 0;
  padding-bottom: 0;
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 2rem;
}

/* 夜间模式适配 */
body.dark-mode .music-container {
  background: #181a1b !important;
}

body.dark-mode .music-card {
  background: #232324;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.dark-mode .card-title,
body.dark-mode .card-artist {
  color: #eee;
}

body.dark-mode .card-stats {
  color: #aaa;
}

body.dark-mode .bottom-player {
  background: #232324 !important;
}

body.dark-mode .fullcover-mode {
  background-color: rgba(10, 10, 10, 0.95) !important;
}

/* 音乐卡片网格布局 */
.music-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.music-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.music-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.music-card.active {
  border: 2px solid #646cff;
  box-shadow: 0 10px 25px rgba(100, 108, 255, 0.3);
}

.card-cover {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 宽高比 */
}

.card-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-card:hover .play-overlay,
.music-card.active .play-overlay {
  opacity: 1;
}

.play-icon {
  color: white;
  font-size: 2rem;
}

.card-content {
  padding: 15px;
}

.card-title {
  margin: 0 0 5px;
  font-size: 1rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-artist {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #999;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stat-icon {
  font-size: 0.9rem;
}

.navigation {
  text-align: center;
  margin-top: 30px;
}

.nav-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.nav-btn:hover {
  background: #535bf2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 全屏播放器 */
.fullscreen-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fullscreen-content {
  text-align: center;
  color: white;
  width: 100%;
  max-width: 600px;
  padding: 20px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.fullscreen-album {
  width: 300px;
  height: 300px;
  margin: 0 auto 30px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.fullscreen-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullscreen-title {
  font-size: 1.8rem;
  margin: 0 0 10px;
}

.fullscreen-artist {
  font-size: 1.2rem;
  color: #ccc;
  margin: 0 0 30px;
}

.fullscreen-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* 引导手势动画 */
.swipe-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.swipe-animation {
  text-align: center;
  color: white;
  animation: pulse 2s infinite;
}

.swipe-hand {
  width: 80px;
  height: 80px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2V7zm0 8h2v2h-2v-2z"/></svg>') center no-repeat;
  background-size: contain;
  margin: 0 auto 20px;
}

.swipe-text {
  font-size: 1.2rem;
  margin-top: 20px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 歌词显示区域样式 */
.lyrics-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 1000;
}

.lyrics-content {
  position: absolute;
  background: transparent;
  border-radius: 12px;
  padding: 20px;
  min-width: 300px;
  max-height: 150px;
  overflow-y: hidden;
  pointer-events: auto;
  cursor: grab;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lyrics-content:active {
  cursor: grabbing;
}

.lyrics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  background: transparent !important;
}

.lyrics-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.2rem;
}

.close-lyrics {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-lyrics:hover {
  color: #333;
  background-color: #f0f0f0;
}

.lyrics-body {
  text-align: center;
  max-height: 80px;
  overflow: hidden;
}

.lyrics-line {
  margin: 8px 0;
  color: #666;
  font-size: 18px;
  line-height: 1.4;
  transition: all 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lyrics-line:hover {
  color: #333;
  transform: translateX(5px);
}

/* 底部固定播放条 */
.bottom-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--player-main-color, #9c0000); /* 使用CSS变量 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  animation: slideUp 0.3s ease;
  padding-bottom: 3px;
  transition: background-color 2s ease; /* 平滑过渡效果 */
}

/* 全屏封面模式 */
.fullcover-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: none;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  backdrop-filter: blur(5px); /* 添加模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 添加边框 */
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.power-btn {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.power-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.power-btn-inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.power-btn-line {
  width: 2px;
  height: 10px;
  background: white;
  position: absolute;
  top: -12px;
}

.fullcover-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  box-sizing: border-box;
}

.fullcover-main {
  display: flex;
  width: 100%;
  height: calc(100% - 200px); /* 留出更多空间给底部控制区和歌词区 */
  margin-bottom: 20px;
}

.fullcover-left {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 调整对齐方式，使内容靠上显示 */
  padding-top: 60px; /* 增加顶部内边距，避免图片太靠上 */
}

/* 移除原来的右侧歌词区域 */

.fullcover-image {
  max-width: 90%;
  max-height: 50vh; /* 调整图片最大高度 */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
  margin-top: 20px; /* 增加顶部外边距 */
}

.fullcover-info {
  text-align: center;
  margin-bottom: 30px;
  color: white;
  width: 90%;
}

.fullcover-title {
  font-size: 1.8rem;
  margin: 0 0 10px;
  font-weight: 600;
}

.fullcover-artist {
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.7;
}

/* 移除原来的歌词标题样式 */

/* 移除原来的歌词内容样式 */

.lyrics-line {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 10px 0;
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding-left: 10px;
  transition: all 0.3s ease;
}

.lyrics-line:nth-child(1) {
  animation-delay: 0.1s;
}

.lyrics-line:nth-child(2) {
  animation-delay: 0.2s;
}

.lyrics-line:nth-child(3) {
  animation-delay: 0.3s;
}

.lyrics-line:nth-child(4) {
  animation-delay: 0.4s;
}

.lyrics-line:nth-child(5) {
  animation-delay: 0.5s;
}

.lyrics-line:nth-child(6) {
  animation-delay: 0.6s;
}

.lyrics-line:nth-child(7) {
  animation-delay: 0.7s;
}

.lyrics-line:nth-child(8) {
  animation-delay: 0.8s;
}

.lyrics-line.active {
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  position: relative;
  padding-left: 20px;
  border-left: 3px solid rgba(255, 255, 255, 0.8);
}

.lyrics-line.active::before {
  content: '';
  position: absolute;
  left: -100px;
  top: 0;
  width: 90px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1));
  opacity: 0.5;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fullcover-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.fullcover-control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.fullcover-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.fullcover-play-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.fullcover-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.fullcover-lyrics-container {
  width: 100%;
  height: 120px; /* 增加高度 */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 20px;
}

.fullcover-lyrics-content {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
}

.lyrics-line {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 8px 0;
  transition: all 0.3s ease;
  text-align: center;
}

.lyrics-line.active {
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.fullcover-progress {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  gap: 15px;
  margin-left: auto;
  margin-right: auto;
}

.fullcover-progress .progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.fullcover-progress .progress-fill {
  height: 100%;
  background: white;
  border-radius: 3px;
  position: relative;
}

.progress-handle {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.time-display {
  font-size: 0.9rem;
  color: white;
  opacity: 0.7;
  min-width: 45px;
  text-align: center;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.bottom-player-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 10px;
}

.bottom-player-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.bottom-player-cover {
  width: 54px;
  height: 54px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.bottom-player-text {
  min-width: 0;
  margin-right: 15px;
  flex: 1;
}

.bottom-player-title {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-badge {
  background: linear-gradient(to right, #e6b980, #eacda3);
  color: #8a2e00;
  font-size: 0.7rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
}

.bottom-player-artist {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.player-actions {
  position: relative;
  display: flex;
  gap: 10px;
  margin-right: 20px;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
}

.action-btn:hover {
  transform: scale(1.1);
}

.bottom-player-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 300px;
}

.bottom-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.bottom-player-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  justify-content: flex-end;
}

.control-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.fullscreen-btn {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fullscreen-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.play-btn.playing {
  background: rgba(255, 255, 255, 0.3);
}

.sound-btn, .lyrics-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 6px 12px;
}

.lyrics-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 1rem;
}

.player-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
}

.progress-bar {
  width: 100%;
  height: 100%;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--player-secondary-color, #ff5252); /* 使用CSS变量 */
  border-radius: 3px;
  position: relative;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #333;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

.nav-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background: #535bf2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 顶部播放条样式 - 与底部播放条保持一致 */
.top-player {
  background: var(--player-main-color, #9c0000); /* 使用与底部播放条相同的背景色 */
  border-radius: 15px;
  padding: 15px 20px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: background-color 2s ease; /* 平滑过渡效果 */
}

.top-player-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.top-player-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.top-player-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 300px;
}

.top-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin: 15px 0;
}

.top-player-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: flex-end;
}

/* 顶部播放条控制按钮样式 - 与底部播放条保持一致 */
.top-control-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.top-control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.top-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.top-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.top-play-btn.playing {
  background: rgba(255, 255, 255, 0.3);
}

.top-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
}

.top-progress-fill {
  height: 100%;
  background: var(--player-secondary-color, #ff5252); /* 使用CSS变量 */
  border-radius: 3px;
  position: relative;
  transition: width 0.1s linear, background-color 2s ease; /* 添加背景色过渡 */
}

.top-time {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  min-width: 40px;
  text-align: center;
}

.top-player-cover {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.top-player-text {
  min-width: 0;
  margin-right: 20px;
  flex: 1;
}

.top-player-title {
  font-weight: 500;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.top-player-artist {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 全屏播放器 */
.fullscreen-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.fullscreen-player-cover {
  width: 70%;
  height: 70%;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.fullscreen-player-title {
  font-size: 2rem;
  font-weight: 500;
  color: white;
  margin-top: 20px;
  text-align: center;
}

.fullscreen-player-artist {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.fullscreen-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.fullscreen-control-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 50%;
  font-size: 1.5rem;
}

.fullscreen-control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fullscreen-play-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.fullscreen-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.fullscreen-play-btn.playing {
  background: rgba(255, 255, 255, 0.3);
}

.fullscreen-progress-bar {
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  margin-top: 20px;
}

.fullscreen-progress-fill {
  height: 100%;
  background: var(--player-secondary-color, #ff5252); /* 使用CSS变量 */
  border-radius: 2px;
  position: relative;
  transition: width 0.1s linear, background-color 2s ease; /* 添加背景色过渡 */
}

/* 点赞按钮样式 */
.action-btn.like-btn {
  position: relative;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-btn.like-btn:hover {
  transform: scale(1.2);
}

.action-btn.like-btn:active {
  transform: scale(0.95);
}

.action-btn.like-btn.liked {
  color: #ff3b5c;
}

.action-btn.like-btn.liked svg path {
  fill: #ff3b5c;
  fill-opacity: 1;
}

/* 卡片中点赞按钮样式 */
.like-stat {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-stat:hover {
  transform: scale(1.1);
}

.like-stat.liked {
  color: #ff3b5c;
}

.like-stat.liked .stat-icon {
  color: #ff3b5c;
}

/* 点赞效果样式 */
.like-effect {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff3b5c;
  font-weight: bold;
  animation: float-up 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
  font-size: 0.9rem;
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -20px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
}

/* 水花效果 */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 59, 92, 0.5);
  pointer-events: none;
  width: 0;
  height: 0;
  animation: ripple 1s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

/* 更多选项菜单样式 */
.more-menu {
  position: absolute;
  bottom: 100%; /* 菜单在按钮上方 */
  right: 0; /* 与按钮右对齐 */
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 200px;
  padding: 8px 0;
  margin-bottom: 10px;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-item svg {
  margin-right: 10px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .music-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .music-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .bottom-player-right {
    flex: 0 0 auto;
  }
  
  .bottom-player-left {
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .music-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .music-player {
    padding: 20px;
  }
  
  .vinyl {
    width: 150px;
    height: 150px;
  }
  
  .vinyl-inner {
    width: 110px;
    height: 110px;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .controls {
    gap: 10px;
  }
  
  .volume-slider-container.visible {
    width: 100px;
  }
  
  .fullscreen-album {
    width: 250px;
    height: 250px;
  }
  
  /* 顶部播放条响应式设计 */
  .top-player-content {
    flex-wrap: wrap;
    padding: 10px 15px;
  }
  
  .top-player-center {
    order: 3;
    max-width: none;
    width: 100%;
    margin-top: 10px;
  }
  
  .top-player-right {
    flex: 0 0 auto;
  }
  
  .top-player-cover {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  
  .top-player-title {
    font-size: 1rem;
  }
  
  .top-player-artist {
    font-size: 0.9rem;
  }
  
  .top-player-controls {
    gap: 15px;
  }
  
  .control-btn svg {
    width: 24px;
    height: 24px;
  }
  
  .bottom-player-content {
    flex-wrap: wrap;
    padding: 10px 15px;
  }
  
  .bottom-player-center {
    order: 3;
    max-width: none;
    width: 100%;
    margin-top: 10px;
  }
  
  .bottom-player-right {
    flex: 0 0 auto;
  }
  
  .control-btn.lyrics-btn,
  .control-btn.repeat-btn {
    display: none;
  }
}

@media (max-width: 480px) {
  .music-grid {
    grid-template-columns: 1fr;
  }
  
  .content-wrapper {
    padding: 10px;
  }
  
  .controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .playback-settings {
    order: -1;
    margin-bottom: 10px;
  }
  
  .volume-control {
    order: -1;
    margin-bottom: 10px;
  }
  
  .fullscreen-album {
    width: 200px;
    height: 200px;
  }
  
  .fullscreen-title {
    font-size: 1.5rem;
  }
  
  .fullscreen-artist {
    font-size: 1rem;
  }
  
  /* 顶部播放条移动端响应式设计 */
  .top-player-content {
    padding: 8px 12px;
    gap: 8px;
  }
  
  .top-player-cover {
    width: 50px;
    height: 50px;
    margin-right: 8px;
  }
  
  .top-player-title {
    font-size: 0.9rem;
  }
  
  .top-player-artist {
    font-size: 0.8rem;
  }
  
  .top-player-controls {
    gap: 10px;
    margin: 10px 0;
  }
  
  .top-player-right {
    gap: 5px;
  }
  
  .play-btn {
    width: 50px;
    height: 50px;
  }
  
  .control-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .bottom-player-content {
    padding: 8px 12px;
    gap: 8px;
  }
  
  .bottom-player-cover {
    width: 45px;
    height: 45px;
    margin-right: 8px;
  }
  
  .bottom-player-title {
    font-size: 0.85rem;
  }
  
  .bottom-player-artist {
    font-size: 0.75rem;
  }
  
  .player-actions {
    margin-right: 0;
    gap: 5px;
  }
  
  .action-btn.more-btn {
    display: none;
  }
  
  .play-btn {
    width: 46px;
    height: 46px;
  }
  
  .control-btn svg {
    width: 22px;
    height: 22px;
  }
  
  .bottom-player-right {
    gap: 8px;
  }
  
  .sound-btn {
    display: none;
  }
}
</style>

<!-- 添加全屏模式的样式 -->
<style>
/* 全屏模式下的样式 */
:fullscreen {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
}

:-webkit-full-screen {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
}

:-moz-full-screen {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
}

:-ms-fullscreen {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
}

/* 全屏模式下的内容样式 */
:fullscreen .music-container {
  padding: 40px;
  box-sizing: border-box;
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:-webkit-full-screen .music-container {
  padding: 40px;
  box-sizing: border-box;
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:-moz-full-screen .music-container {
  padding: 40px;
  box-sizing: border-box;
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:-ms-fullscreen .music-container {
  padding: 40px;
  box-sizing: border-box;
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>